<template>
    <!--主页菜品组件-->
    <div class="main">
        <van-card
                class="card"
        >
            <!--标题-->
            <template #title>
                <h3 class="dishTitle">{{dish.title}}</h3>
            </template>
            <!--描述-->
            <template #desc>
                <div class="van-ellipsis dishDesc">{{dish.description}}</div>
            </template>
            <!--图片-->
            <template #thumb>
                <van-image
                        width="100"
                        height="100"
                        :src="dish.imgUrl" @click="showImg=true">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                            <template v-slot:error></template>
                </van-image>
            </template>
            <template #tags>
                <p class="dishSell">月售{{dish.sellVolume}}</p>
                <van-tag class="dishPrice" type="primary">￥{{dish.price}}</van-tag>
            </template>
            <template #footer>
                <van-button
                        v-if="dish.number==0"
                        icon="plus"
                        type="danger"
                        round
                        size="mini"
                        @click="clickAddDish"/>
                <van-stepper
                        v-else
                        v-model.number="dish.number"
                        min="0"
                        max="99"
                        theme="round"
                        button-size="22"
                        disable-input
                        @change="addShoppingTrolley" />
            </template>
        </van-card>
        <!--图片-->
        <van-image-preview v-model="showImg" :images="[dish.imgUrl]">
            <template v-slot:index>{{dish.title}}</template>
        </van-image-preview>
    </div>
</template>

<script>
    export default {
        name: "Dish",
        props:["dish"],
        computed:{
           //用户id
          userID(){
              //从session中取出用户id
              const userID=sessionStorage.getItem("userID");
              return userID;
          }
        },
        data(){
            return{
                showImg:false
            }
        },mounted() {

        },
        methods:{
            //点击加入加入按钮
            clickAddDish(){
                if(this.userID==null||this.userID=='')return this.$dialog.confirm({
                    title: '你尚未登录，请先登录在进行操作',
                    theme: 'round-button'
                }).then(() => {

                        this.$router.push("/login")
                    })
                    .catch(() => {
                        // on cancel
                    });
                //进行自增
                this.dish.number++;
                //添加购物车总数
                this.$store.commit("autoIncrementShoppingTotal")
                this.addShoppingTrolley();
                const messageTitle=this.dish.title+'已加入购物车';
                this.$toast({type:"success",message:messageTitle});
            },
            //添加购物车
           async addShoppingTrolley(){
              const {data:res}=await this.$http.get("/dish/addShoppingTrolley",
                    {params:{uid:this.userID,did:this.dish.did,number:this.dish.number}});
              if (res.status!=200)return this.$notify({type:"danger",message:"添加购物车失败"});
            }
        }
    }
</script>

<style scoped>
    .main{
        margin-bottom: 10px;
    }
    .dishDesc,.dishTitle,.dishPrice,.dishSell{
        margin-left: 10px;
    }
    .dishTitle{
        margin-top: 10px;
        font-size: 18px;
        color: coral;
    }
    .dishDesc{
        margin-top: -10px;
        font-size: 14px;
    }
    .dishPrice{
        margin-top: 3px;
        font-size: 14px;
    }
    .dishSell{
        margin-top: 2px;
        margin-bottom: 0;
    }
</style>
